<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"> 
    <!--
    Author Lu Xiaodi
    -->
    <h:head> 
        <title>Purchase Deliverable Meal</title>

        <style type="text/css"> 

            .gritter-notice-wrapper { 
                left:200px; 
                top:50px; 
            } 
            
            .order-table{   
                border-collapse:collapse;
            }

            .order-table-header{
                text-align:center;
                background:none repeat scroll 0 0 #E5E5E5;
                border-bottom:1px solid #BBBBBB;
                padding:16px;
            }

            .order-table-odd-row{
                text-align:center;
                background:none repeat scroll 0 0 #FFFFFFF;
                border-top:1px solid #BBBBBB;
            }

            .order-table-even-row{
                text-align:center;
                background:none repeat scroll 0 0 #F9F9F9;
                border-top:1px solid #BBBBBB;
            }
             body {
margin-left: 100px;
margin-top: 80px;
margin-right: 100px;
margin-bottom: 0px;

}
.center{
    margin-left:auto; margin-right:auto;
    font-size: large;
}
        </style> 


    </h:head> 
    <h:body>    
        <p:breadCrumb>   
            <p:menuitem value="" url="index.xhtml" />
            <p:menuitem value="Table Booking" url="TableBooking.xhtml" />  
            <p:menuitem value="Non-Deliverable Meal Purchase" url="MealPurchase.xhtml" />  
            <p:menuitem value="Deliverable Meal Purchase" url="deliverableMealPurchase.xhtml" />
            <p:menuitem value="Group Buying Item" url="GroupBuying.xhtml"/>
        </p:breadCrumb>  
        <h2> Dear <h:outputText value="#{fakeMainPortalMB.customerEmail}"/> Welcome to <h:outputText value="#{fakeMainPortalMB.outletName}"/></h2>
        
        <!--1-->
        <h:form style="background-color:#EEF3E2">
            <br/>
            <!--<p:panel id="panel" >
                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>

                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>-->
                <!--<h:panelGrid columns="3">
                </h:panelGrid>-->

            <h3 align="center">Deliverable Menu    -- Ala Carte Menu</h3>
                <p:dataTable value="#{ReservationManagementBean.getDeliverableAlaCarte()}" var="o"
                             styleClass="order-table">
                    <p:column>
                        <f:facet name="header">Name</f:facet>
    			#{o.item_name}
                    </p:column>
                    <p:column>
                        <f:facet name="header">Price</f:facet>
                        <h:outputText value="#{o.item_price}" >
                            <f:convertNumber type="currency" />
                        </h:outputText>
                    </p:column>
                    <p:column>
                        <f:facet name="header">Quantity</f:facet>
                        <h:inputText id="QtyDeliverableAlaCarte" maxlength="3" size ="3" value="#{o.item_quantity}"/>
                    </p:column>
                </p:dataTable>
            
            <h3 align="center">Deliverable Menu    -- Set Menu</h3>
            
            <p:dataTable value="#{ReservationManagementBean.getDeliverableSetMeals()}" var="o"
                             styleClass="order-table">
                    <p:column>
                        <f:facet name="header">Name</f:facet>
    			#{o.item_name}
                    </p:column>
                    <p:column>
                        <f:facet name="header">Price</f:facet>
                        <h:outputText value="#{o.item_price}" >
                            <f:convertNumber type="currency" />
                        </h:outputText>
                    </p:column>
                    <p:column>
                        <f:facet name="header">Quantity</f:facet>
                        <h:inputText id="QtyDeliverableSet" maxlength="3" size ="3" value="#{o.item_quantity}"/>
                    </p:column>
                </p:dataTable>
            
                <h2>Deliver Address</h2>
                <h3>Address: </h3>
                <p:inputTextarea id="Address" rows="4" cols="60" value="#{ReservationManagementBean.address}" required="true" label="Address" requiredMessage="Address is required.">
                    <f:validateLength minimum="5"/>
                </p:inputTextarea>
                <p:commandButton id="submit" value="Confirm" action="confirmationDeliverable.xhtml?faces-redirect=true" />
            <!--</p:panel>-->
        </h:form>
    </h:body>
</html>

